<template>
    <div class="page">
        <div class="page-content">
    
            <!--个人信息一览-->
            <div class="person_info">
                <img src="/static/img/card@3x.png" alt="" class="bg">
                <ul class="level">
                    <li v-for="i in [1,2,3,4]" :class="[i<=userCreditNums?'active':'']"></li>
                </ul>
                <section class="main">
                    <div class="title">
                        <p>
                            <span>个人信息</span>
                            <br/>
                            <span>INFORMATION CARD</span>
                        </p>
                    </div>
                    <div class="credit">
                        信用额度:
                        <span>￥{{user.useLimit==null?'---':user.useLimit}}</span>
                    </div>
                </section>
                <section class="aside">
                    <span>{{user.userId||'6222------------'|userIdFilt}}</span>
                    <span>已借款{{user.borrowCount||'-'}}次</span>
                </section>
            </div>
    
            <!--选择金额和期限-->
            <div class="action_loan">
                <lo-loan-line title="选择借款金额（元）" v-if="amountList" :items="amountList" v-model="amountIndex" :limitIndex="amountlimitIndex||2" class="money_line"></lo-loan-line>
                <lo-loan-line title="选择借款期限（天）" v-if="daysList" :items="daysList" v-model="daysIndex" :limitIndex="4" class="day_line"></lo-loan-line>
            </div>
    
            <!--费用信息-->
            <ul class="loan_info">
                <li class="choose">
                    选择优惠券：
                    <a href="javascript:void(0)" @click="openPop">使用优惠券</a>
                    <span v-if="selectedRedLi||selectedFreeLi">
                        （
                        <span v-if="selectedRedLi">红包{{selectedRedLi.amount}}元</span>
                        <span v-if="selectedRedLi&&selectedFreeLi">，</span>
                        <span v-if="selectedFreeLi">已免息{{selectedFreeLi.upApr}}%</span>）
                    </span>
                </li>
                <b-divide></b-divide>
                <li class="loan">
                    <span>借款金额：{{amount}}元</span>
                    <span>借款期限：{{days}}天</span>
                </li>
                <template v-if="amountIndex!=0&&daysIndex!=0">
                    <b-divide></b-divide>
                    <li class="expense">
                        <span>管理费：{{managementFee}}元</span>
                        <span>信审费{{productSelected.vettingFee}}元</span>
                        <span>服务费：{{productSelected.serviceFee}}元</span>
                        <!--免息券计算-->
                        <span>利息：{{interest | fixedFilt}}元</span>
                    </li>
                </template>
            </ul>
            <md-button class="button button-royal button-block" v-if="user&&user.status==4">
                认证审核中
            </md-button>
            <md-button class="button button-balanced button-block" @click.native="loan()" v-else>
                立即申请借款
            </md-button>
        </div>
    
        <b-popup :show="privilegeShow">
            <div class="popup_privilege">
                <div class="close" @click="privilegeShow=false">
                    <img src="/static/img/cancel@3x.png">
                </div>
                <p class="title">随行贷</p>
                <h3 class="slogan">
                    <span>春暖花开</span>
                    <span>含包贷放</span>
                </h3>
                <div class="main">
                    <div class="tab">
                        <span :class="{active:privilegeIndex==0}" @click="privilegeIndex=0">红包券</span>
                        <span :class="{active:privilegeIndex==1}" @click="privilegeIndex=1">免息券</span>
                    </div>
                    <div class="red_box" v-show="privilegeIndex==0">
                        <ul class="plist" v-show="usableRedList.length>0">
                            <li v-for="redLi in usableRedList" :class="[selectedRedLi&&redLi.redId==selectedRedLi.redId?'selected':'']" @click="selectRed(redLi)">
                                <img src="/static/img/giftCoupons@3x.png">
                                <div class="limit">
                                    ￥
                                    <span>{{redLi.amount}}</span>
                                </div>
                                <div class="desc">
                                    <h3>{{redLi.sourceType|sourceText}}</h3>
                                    <p>有效期：{{redLi.expiredTime}}</p>
                                </div>
                                <i class="selctedIcon"></i>
                            </li>
                        </ul>
                        <div class="no_privilege" v-if="usableRedList.length==0">
                            <img src="static/img/empty@3x.png" />
                        </div>
                    </div>
                    <div class="free_box" v-show="privilegeIndex==1">
                        <ul class="plist" v-show="usableFreeList.length>0">
                            <li v-for="freeLi in usableFreeList" :class="[selectedFreeLi&&freeLi.couponId==selectedFreeLi.couponId?'selected':'']" @click="selectFree(freeLi)">
                                <img src="/static/img/giftCoupons@3x.png">
                                <div class="limit limit_free">
                                    <span>{{freeLi.upApr}}%</span>
                                    <p>免息券</p>
                                </div>
                                <div class="desc">
                                    <h3>{{freeLi.sourceType|sourceText}}</h3>
                                    <p>有效期：{{freeLi.endTime}}</p>
                                </div>
                                <i class="selctedIcon"></i>
                            </li>
                        </ul>
                        <div class="no_privilege" v-if="usableFreeList.length==0">
                            <img src="static/img/empty@3x.png" />
                        </div>
                    </div>
                </div>
            </div>
        </b-popup>
    
        <b-popup :show="activityShow">
            <div class="activity" v-if="newActivity">
                <div class="close" @click="activityShow=false">
                    <img src="/static/img/cancel@3x.png">
                </div>
                <a href="javascript:void(0)" @click="goActivityDo(newActivity.jumpUrl)">
                    <img :src="newActivity.imageUrl" />
                </a>
            </div>
        </b-popup>
    
        <b-popup :show="this.user.borrowStatus=='C'">
            <div class="checking">
                <img class="logo" src="static/img/logo@3x.png" />
                <div class="checking_audit">
                    <p class="checking_audit_msg">
                        {{user.borrowStatus|borrowStatusFilt}}
                    </p>
                    <img class="checking_audit_img" src="static/img/audit@3x.png" />
                </div>
            </div>
        </b-popup>
    </div>
</template>
<script src="./Action.js"></script>
<style lang="scss" scoped src="./Action.scss"></style>
